<template>
  <div class="dashboard-container">
    <div class="app-container">
      <a-card class="tools-card">
        <a-button type="primary" @click="showDialog = true">新增员工</a-button>
      </a-card>
      <a-card>
        <a-table :columns="columns" :dataSource="list"
        :pagination="{
            current: pageParams.page,
            pageSize: pageParams.size,
            total: pageParams.total,
            onChange: changePage
          }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <!-- 头像区 -->
            <template v-if="column.dataIndex === 'staffPhoto'">
              <a-avatar :size="100" :src="record.staffPhoto || DefaultImg"></a-avatar>
            </template>
            <template v-if="column.dataIndex === 'operate'">
              <!-- 判断当前是操作列 -->
              <a-space>
                <a-button type="primary" @click="detailRow(record.id)">查看</a-button>
                <a-button type="danger" @click="delRow(record.id)">删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
  <AddEmployee v-model:showDialog="showDialog"  @addSuccess="getList"/>
  <card-employee v-model:showDetail="showDetail" :userId="userId"></card-employee>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue'
  import { getEmployeeList, delEmployee } from '@/api/employee.js'
  import { reactive } from 'vue'
  import DefaultImg from '@/assets/default.png'
  import { message, Modal } from 'ant-design-vue'
  import AddEmployee from './components/add-employee.vue' 
  import CardEmployee from './components/card-employee.vue'

  const columns = [
  {
    title: '序号',
    customRender({ index }) {
      // 1页 1-10  2- 11-20
      // (page - 1 ) * size
      return (pageParams.page - 1) * pageParams.size + index + 1
    }
  },
  {
    title: '姓名',
    dataIndex: 'username'
  },
  {
    title: '头像',
    dataIndex: 'staffPhoto'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '工号',
    dataIndex: 'workNumber'
  },
  {
    title: '聘用形式',
    dataIndex: 'formaOfEmployment'
  },
  {
    title: '部门',
    dataIndex: 'departmentName'
  },
  {
    title: '入职时间',
    dataIndex: 'timeOfEntry'
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
]
  const showDialog = ref(false)

  const pageParams = reactive({
    page: 1,
    size: 10,
    total: 0
  })

  const list = ref([])
  const getList = async () => {
    const close = message.loading('数据正在加载中...')
    const { rows, total } = await getEmployeeList(pageParams)
    list.value = rows
    pageParams.total = total
    close()
  }

  const changePage = (page, pagesize) => {
    pageParams.page = page
    pageParams.size = pagesize
    getList()
  }

  onMounted(()=> {
    getList()
  })

  const showDetail = ref(false)
  const userId = ref(null) // 用户id

  const detailRow = (id) => {
  showDetail.value = true
  userId.value = id
}

// 当showDetail为false 情况useId --> 查看员工信息才正确
watch(showDetail,()=> {
  if(!showDetail.value) {
    userId.value = null
  }
})

const delRow = (id) => {
  Modal.confirm({
    text: '提示',
    context: '您确定删除该员工吗？',
    onOk: async() => {
      await delEmployee(id)
      message.success('删除成功')
      // 重新获取数据
      getList()
    }
  })
}
</script>

<style scoped>
.app-container {
  padding: 16px;
}
.tools-card {
  margin-bottom: 16px;
}
</style>